<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/style.css">
    <title>水印</title>

    <style>

        main {
            flex: 1;
        }

        nav {
            width: 100%;
            height: 100%;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);

            box-sizing: border-box;
            padding: 1em;
        }
        nav > ul {
            list-style: none;
            margin: 0;
            padding: 0;

            display: flex;
            gap: 1em;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 2em;
        }

        component-watermark {
            width: 50%;
            height: 50%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 1em;
        }
    </style>
</head>
<body>

    <header>
        <nav>
            <ul>
                <li>
                    <a href="javascript: history.back();">返回上一页</a>
                </li>
                <li>
                    <a href="/">回到首页</a>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <div class="container">
            <component-watermark data-text="水印测试" data-size="24" data-gap="36">
                <p>大家好</p>
                <p>我是个人开发者，尘跃。</p>
                <p>按F12打开控制台查看源代码。</p>
            </component-watermark>
        </div>
    </main>

    <footer>
        <hr/>
        <p class="copyright">&copy; 2024 尘跃</p>
    </footer>

    <script>
        class Watermark extends HTMLElement {
            constructor() {
                super();
                /** @type { HTMLElement } */
                this.div = undefined;
                this.style.position = "relative";

                // 放里头增加安全性
                const reset水印 = () => {
                    if (this.div) {
                        this.div.remove();
                    }

                    const 水印内容 = this.dataset.text;
                    if (!水印内容) {
                        return;
                    }
                    let fontSize = 24;
                    if (this.dataset.size) {
                        try {
                            fontSize = parseFloat(this.dataset.size);
                        } catch (error) {
                            console.error(error);
                        }
                    }
                    let textGap = fontSize;
                    if (this.dataset.gap) {
                        try {
                            textGap = parseFloat(this.dataset.gap);
                        } catch (error) {
                            console.error(error);
                        }
                    }

                    function draw水印(parentElement, {drawText, fontSize = 24, gap = 24}) {
                        const parentRectangle = parentElement.getBoundingClientRect();
                        const canvas = document.createElement("canvas");
                        canvas.width = parentRectangle.width;
                        canvas.height = parentRectangle.height;

                        const ctx = canvas.getContext("2d");
                        ctx.fillStyle = "gray";
                        ctx.font = `${fontSize}px bold`;
                        const textMeasure = ctx.measureText(drawText);
                        const xDistance = textMeasure.width + gap;
                        const yDistance = fontSize + gap;
                        ctx.rotate(-45 * Math.PI / 180);
                        const rowCount = Math.ceil(canvas.width / fontSize);
                        const columnCount = Math.ceil(canvas.height / fontSize) + rowCount;
                        const x偏移 = -xDistance * rowCount / 4;
                        const y偏移 = -yDistance * 0.5;
                        for(let i = 0; i < columnCount; i++) {
                            for(let j = 0; j < rowCount; j++) {
                                ctx.fillText(drawText, j * xDistance +  x偏移, i * yDistance + y偏移);
                            }
                        }
                        return canvas.toDataURL();
                    }
                    const imgURL = draw水印(this, {
                        drawText: 水印内容,
                        fontSize,
                        gap: textGap
                    });

                    const div = document.createElement("div");
                    div.style.zIndex = "-1";
                    div.style.position = "absolute";
                    div.style.left = 0;
                    div.style.top = 0;
                    div.style.width = "100%";
                    div.style.height = "100%";
                    div.style.background = `url("${imgURL}")`;
                    div.style.opacity = "0.8";

                    this.div = div;
                    this.appendChild(this.div);
                }
                reset水印();

                new MutationObserver((records) => {
                    console.log(records);
                    for(const record of records) {
                        // 删除
                        for(const node of record.removedNodes) {
                            if (node === this.div) {
                                reset水印();
                            }
                        }

                        // 改样式
                        if (record.attributeName === "style") {
                            reset水印();
                        }
                    }
                }).observe(this, {
                    attributes: true,
                    childList: true,
                    subtree: true,
                });
            }
        }

        window.customElements.define("component-watermark", Watermark);
    </script>
</body>
</html>


